<template>
	<view class="popup " :class="[modelClass,bgClass,position]" @touchmove.stop.prevent="stopPrevent" catchtouchmove="stopPrevent">
		<!-- 遮罩层 -->
		<view class="mask" @click="maskTap"></view>
		<view class="layer" @click.stop="stopPrevent">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			bgClass:{
				type:String,
				default:''
			},
			tapMaskHide:{
				type:Boolean,
				default:true
			},
			position:{
				type:String,
				default:'center'
			}
		},
		data() {
			return {
				modelClass:'none',
			};
		},
		methods:{
			stopPrevent(){
				uni.stopPullDownRefresh();
			},
			toggleModel(type='none') {
				let $p=this.$parent
				if(this.modelClass === 'show'){
					this.modelClass = 'hide';
					$p.isPopup=false;
					setTimeout(() => {
						this.modelClass = 'none';
					}, 250);
				}else if(this.modelClass === 'none'){
					this.modelClass = 'show';
					$p.isPopup=true;
				}
			},
			show(){
				this.modelClass = 'show';
			},
			hide(){
				this.modelClass = 'hide';
				this.$emit('close');
			},
			maskTap(){
				if(this.tapMaskHide){
					this.hide()
				}
			}
		}
	}
</script>

<style lang="scss">
	
</style>
